<template>
  <div class="app-container">

   <div class="filter-container">

      <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
      
      <el-button  class="filter-item" type="primary" icon="el-icon-search" >
        搜索
      </el-button>
    </div>
     
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="时间" width="320">
        <template slot-scope="scope">
          {{ scope.row.display_time  }}
        </template>
      </el-table-column>
      <el-table-column label="订单数量" min-width="220" align="center">
        <template slot-scope="scope">
          500
        </template>
      </el-table-column>
      <el-table-column label="总消费" width="220" align="center">
        <template slot-scope="scope">
          <span>200</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="220" align="center">
        <template slot-scope="scope">
          张三
        </template>
      </el-table-column>
      <!-- <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="created_at" label="手机号" width="220" >
        <template slot-scope="scope">
          <span>18297859347</span>
        </template>
      </el-table-column>
    </el-table>
   <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit"  />
    
  </div>
   
   
  
</template>

<script>
import { getList } from '@/api/table'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
       }, 
      value2: '',
      total: 10,
      listLoading: true,
      page: 1,
      limit: 10,
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
 .filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:220px;
 }
</style>
